<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>支付信息</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

</head>
<body style="height:100%;background-color:white;position:relative;">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">支付信息</span>
</div>
<div id="app" class="container" style="height:100%;" v-cloak>
    <div class="withdraw-line" style="margin-top:60px;"></div>
    <div class="withdraw-row-container">
        <div class="withdraw-row" style="padding:0">
            <span style="float:left;font-size:20px;margin-left:15px;">{{infos.title}}</span>
            <span style="float:right;font-size:16px;margin-right:15px;">{{infos.desc}}</span>
        </div>
    </div>
    <div class="withdraw-line" style="height:20px;"></div>
    <div class="withdraw-row-container">
        <div class="withdraw-row">
            请选择支付方式
        </div>
        <div class="withdraw-row" v-myclick="['ali', selectPaymentType]">
            <img v-src="'../../image/accounts_icon_alipay.png'">
            <span>支付宝</span>
            <img class="withdraw-select" key="isAli" v-show="!paymentTypes.ali"
                 v-src="'../../image/withdraw_icon_moren.png'">
            <img class="withdraw-select" key="notAli" v-show="paymentTypes.ali"
                 v-src="'../../image/icon_select.png'">
        </div>
        <div class="withdraw-row" v-if="appInstalled.wx" v-myclick="['wx', selectPaymentType]">
            <img v-src="'../../image/payment_icon_wx.png'">
            <span>微信</span>
            <img class="withdraw-select" key="isWx" v-show="!paymentTypes.wx"
                 v-src="'../../image/withdraw_icon_moren.png'">
            <img class="withdraw-select" key="notWx" v-show="paymentTypes.wx"
                 v-src="'../../image/icon_select.png'">
        </div>
    </div>
    <div class="withdraw-btn" style="background-color:#9d0152" v-myclick="pay">支付</div>
</div>
<div id="mask">支付成功，等待系统审核...</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script>
    var infos,
        aliPayTradePlus,
        wx,
        wxPay,
        vm;
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        showProgress();
        var data = {
            member_id: getPrefs('member_id'),
            order_type: api.pageParam.order_type,        //1、新增会员. 2、会员升级. 3、会员激活
            foreign_infos: api.pageParam.foreign_infos || '',
        };
        wx = api.require('wx');
        var callback = function (ret) {
            infos = ret.content;
            initApp();
            api.parseTapmode();
        };
        pinet.post(URL.prepay, data, callback);

        aliPayTradePlus = api.require('webBrowser');
        wxPay = api.require('wxPay');
        addListeners();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                infos: infos,
                paymentTypes: {
                    ali: true,
                    wx: false,
                },
                appInstalled: {
                    wx: true,
                }
            },
            computed: {
                pay_id: function () {
                    if (this.paymentTypes.ali) {
                        return 2;
                    } else if (this.paymentTypes.wx) {
                        return 3;
                    } else {
                        return 0;
                    }
                }
            },
            methods: {
                selectPaymentType: function (type) {
                    for (var i in this.paymentTypes) {
                        this.paymentTypes[i] = i == type;
                    }
                },
                pay: function () {
                    showProgress();
                    var data = {
                        foreign_infos: api.pageParam.foreign_infos || '',
                        order_type: api.pageParam.order_type,
                        member_id: getPrefs('member_id'),
                        order_amount: this.infos.order_amount,
                        pay_id: this.pay_id
                    };
                    pinet.post(URL.pay, data, vm.pay_common);
                },
                pay_common: function (ret) {
                    switch (ret.content.pay_id) {
                        case 1:
                            vm.member_common();
                            return;
                        case 2:
                            this.pay_ali(ret.content.order_info);
                            break;
                        case 3:
                            this.pay_wx(ret.content);
                            break;
                        default:
                            break;
                    }
                },
                pay_ali: function (order_info) {
                    aliPayTradePlus.payOrder({
                        urlScheme: 'yourendian',
                        orderInfo: order_info
                    }, function (ret, err) {
                        if (ret.code == 9000) {
                            return vm.member_common();
                        } else if (ret.code == 6001) {

                        } else {
                            alert('支付失败,错误码:' + ret.code);
                        }
                    });
                },
                pay_wx: function (infos) {
                    wxPay.payOrder({
                        orderId: infos.prepayid,
                        mchId: infos.partnerid,
                        nonceStr: infos.noncestr,
                        timeStamp: infos.timestamp,
                        package: infos.package,
                        sign: infos.sign
                    }, function (ret, err) {
                        if (ret && ret.status) {
                            return vm.member_common();
                        } else if (err.code == -2) {

                        } else {
                            alert('支付失败,错误码:' + err.code);
                        }
                    });
                },
                member_common: function () {
                    switch (api.pageParam.order_type) {
                        case 1:
                            return this.member_add();
                        case 2:
                            return this.member_up();
                        case 3:
                            return this.member_reactive();
                        case 4:
                            return this.member_register();
                    }
                },
                member_add: function () {
                    api.sendEvent({
                        name: 'addmember'
                    });
                    var ele = document.getElementById('mask');
                    ele.style.display = 'block';
                    setTimeout(function(){
                    openWin('changeMember');
                    ele.style.display = 'none';
                  },3000);
                },
                member_up: function () {
                    api.sendEvent({
                        name: 'level_up',
                    });
                    openWin('../../index',null);
                },
                member_reactive: function () {
                    closeWin('activate');
                    reloadFrame('index', 'user');
                    reload('member_level');
                    closeWin('payment');
                },
                member_register:function(){
                  api.sendEvent({
                      name: 'register',
                  });
                  var ele = document.getElementById('mask');
                  ele.style.display = 'block';
                  setTimeout(function(){
                  openWin('../login/codelogin');
                  ele.style.display = 'none';
                },3000);
              }
            },
            created: function () {
                var that = this;
                wx.isInstalled(function (ret) {
                    that.appInstalled.wx = ret.installed;
                });
            }
        })
    }
    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });
    }

</script>
</html>
